<template>
  <div class="tableListBox">
    <div class="blueTitleView">
      <p class="titleview">合同列表</p>
    </div>
    <div class="iuapContent">
      <div class="content-form">
        <IuapSearch
          :fromData="fromData"
          @searchFn="
            (e) => {
              this.searchFn(e);
            }
          "
          @reset="
            (e) => {
              this.reset(e);
            }
          "
        >
        </IuapSearch>
      </div>
      <div class="content-form__operation">
        <vxe-button status="primary" size="small" @click="add">新增</vxe-button>
        <!-- <vxe-button status="primary" size="small" @click="exp">导出</vxe-button> -->
      </div>
      <div class="tableList">
        <div class="onlyTable">
          <vxe-grid
            class="table-normal"
            ref="table"
            resizable
            show-overflow
            row-key
            keep-source
            border="inner"
            :data="tableData"
            :columns="columns"
            max-height="100%"
          >
            <template #contractStatus="{ row }">
              <span>{{ row.contractStatus | getContractStatus }}</span>
            </template>
            <template #contractSigningDate="{ row }">
              <span>{{ row.contractSigningDate | parseTime('{y}-{m}-{d}') }}</span>
            </template>
            <template #modifyTimeDate="{ row }">
              <span>{{ row.modifyTime | parseTime('{y}-{m}-{d}') }}</span>
            </template>
            <template #operation="{ row }">
              <!-- <vxe-button size="mini" status="info" @click="check(row)">合同完成</vxe-button> -->
              <vxe-button size="mini" status="info" @click="check(row)">详情</vxe-button>
              <vxe-button size="mini" status="info" @click="settlement(row)">结算登记</vxe-button>
              <vxe-button size="mini" status="info" @click="edit(row)">修改</vxe-button>
              <vxe-button v-if="row.contractFile" size="mini" status="info" @click="checkFileList(row)"
                >附件查看</vxe-button
              >
            </template>
          </vxe-grid>
        </div>
        <vxe-pager
          background
          :current-page.sync="form.page"
          :page-size.sync="form.size"
          :total="total"
          :layouts="['Total', 'Sizes', 'PrevPage', 'JumpNumber', 'NextPage']"
          @page-change="pager"
        >
        </vxe-pager>
      </div>
    </div>
    <Settlement ref="settlement" @reload="getList" />
  </div>
</template>
<script>
import keyName from '../../util/keyName';
import util from '../../util/util';
import IuapSearch from '/@/components/Iuap/IuapSearch.vue';
import Settlement from './dialog/settlement.vue';
import VXETable from 'vxe-table';
import * as ExcelJS from 'exceljs';
export default {
  components: { IuapSearch, Settlement },
  data() {
    return {
      form: {
        page: 1,
        size: 10,
      },
      columns: [
        {
          type: 'seq',
          width: 60,
          title: '序号',
        },
        {
          field: 'contractNumber',
          title: '合同编码',
          editRender: {},
        },
        {
          field: 'contractName',
          title: '合同名称',
          editRender: {},
        },
        {
          field: 'customerName',
          title: '委托方',
          editRender: {},
        },
        // {
        //   field: 'agentName',
        //   title: '受托方',
        //   editRender: {},
        // },
        {
          field: 'contractSigningDate',
          title: '委托时间',
          editRender: {},
          slots: { default: 'contractSigningDate' },
        },
        {
          field: 'contractFinishDate',
          title: '完成时间',
          editRender: {},
          formatter({ cellValue }) {
            return util.parseTime(cellValue, '{y}-{m}-{d}');
          },
        },
        {
          field: 'contractStatus',
          title: '合同状态',
          editRender: {},
          slots: { default: 'contractStatus' },
        },
        {
          field: 'contractAmount',
          title: '合同额(元)',
          editRender: {},
        },
        // {
        //   field: '',
        //   title: '收样金额',
        //   editRender: {},
        // },
        {
          field: 'settleAmount',
          title: '结算金额(元)',
          editRender: {},
        },
        // {
        //   field: 'settleRate',
        //   title: '结算占比',
        //   editRender: {},
        // },
        {
          field: 'modifierName',
          title: '更新人',
          editRender: {},
          formatter({ row }) {
            return row.modifierName || row.creatorName;
          },
        },
        {
          field: 'modifyTime',
          title: '更新时间',
          editRender: {},
          slots: { default: 'modifyTimeDate' },
        },
        {
          title: '操作',
          minWidth: 220,
          headerAlign: 'left',
          fixed: 'right',
          slots: { default: 'operation' },
        },
      ],
      tableData: [{}],
      total: 0,
      fromData: [
        {
          name: '合同编号',
          key: 'contractNumber',
          type: 'input',
          value: '',
        },
        {
          name: '合同名称',
          key: 'contractName',
          type: 'input',
          value: '',
        },
        {
          name: '委托方',
          key: 'companyName',
          type: 'input',
          value: '',
        },
        {
          name: '委托时间',
          key: 'contractSigningDate',
          type: 'date',
          value: null,
        },
        {
          name: '完成时间',
          key: 'contractFinishDate',
          type: 'date',
          value: '',
        },
        {
          name: '合同完成状态',
          key: 'contractStatus',
          type: 'option',
          value: '',
          options: [
            {
              label: '已完成',
              value: 'COMPLETED',
            },

            {
              label: '未完成',
              value: 'IN_PROGRESS',
            },
          ],
        },
      ],
    };
  },
  filters: {
    getContractStatus(val) {
      return val === 'COMPLETED' ? '完成' : '未完成';
    },
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      await this.$api.getContractList(this.form).then((res) => {
        try {
          const { list, total } = res.data;
          this.tableData = list;
          this.total = total;
        } catch {}
      });
    },
    // 用于导出数据
    async getAllList() {
      // VXETable.modal.message({ content: '下载中', status: 'loading' });
      return await this.$api.getContractList({ page: 1, size: 100000 }).then((res) => {
        try {
          const { list } = res.data;
          return list;
        } catch {}
      });
    },
    pager({ currentPage, pageSize }) {
      this.form.page = currentPage;
      this.form.size = pageSize;
      this.getList();
    },
    search() {
      this.form.page = 1;
      this.getList();
    },
    searchFn(e) {
      this.fromData.forEach((item) => {
        this.form[item.key] = item.value;
      });
      this.form.page = 1;
      this.getList();
    },
    reset() {
      this.form = {
        page: 1,
        size: 10,
      };
      this.getList();
    },
    add() {
      this.$router.push({ path: 'contractManage/add' });
    },
    edit(row) {
      this.$router.push({ path: 'contractManage/edit', query: { id: row.id } });
    },
    check(row) {
      this.$router.push({ path: 'contractManage/check', query: { id: row.id } });
    },
    async exp() {
      const result = await this.getAllList();
      this.$refs.table.exportData({
        filename: '项目人员商务人员信息表',
        sheetName: '项目人员商务人员信息表',
        type: 'xlsx',
        useStyle: true,
        columnFilterMethod: (column, $columnIndex) => {
          return !(column.$columnIndex === 0 || column.$columnIndex === 5);
        },
        data: result,
      });
    },
    settlement(row) {
      const { id, contractNumber, contractName } = row;
      this.$refs.settlement.form = { contractId: id, contractNumber, contractName };
      this.$refs.settlement.dialogVisible = true;
    },
    checkFileList(row) {
      const item = row.contractFile;
      const a = document.createElement('a');
      a.target = '_blank';
      a.href = item.fileUrl;
      a.click();
    },
  },
};
</script>
<style lang="scss" scoped>
.vxe-button.type--button.theme--primary {
  height: 28px;
  font-size: 12px;
  background-color: rgb(31, 143, 255) !important;
  border-color: rgb(31, 143, 255) !important;
}
.vxe-button.type--button.size--mini {
  height: 21px;
  line-height: 21px;
  font-size: 12px;
}
.vxe-form--item-title-label {
  font-size: 13px;
}
.tableListBox {
  height: 100vh;
  .tableList {
    ::v-deep {
      .vxe-form.outForm {
        .vxe-form--item-content {
          width: 280px;
        }
        .vxe-form--item {
          width: 28%;
        }
        .last-item {
          width: 16%;
          text-align: right;
        }
      }
      .vxe-table--body-wrapper {
        overflow-y: auto !important;
      }
      // .vxe-table--main-wrapper {
      //   height: calc(100vh - 70px);
      //   .vxe-table--body-wrapper {
      //     height: calc(100% - 50px);
      //   }
      // }
      .table-normal .vxe-header--row {
        height: 30px;
      }

      // .vxe-form .vxe-form--item .vxe-form--item-inner .vxe-form--item-content .vxe-input {
      //   height: 26px !important;
      //   line-height: 26px !important;
      // }
      .vxe-table--render-default .vxe-header--column:not(.col--ellipsis) {
        padding: 0 !important;
        font-size: 13px;
      }
      .vxe-table--render-default .vxe-body--column.col--ellipsis {
        height: 35px;
        font-size: 13px;
      }
      .vxe-button.type--text.theme--info {
        color: #06f;
        cursor: pointer;
        line-height: 1;
      }
      .vxe-button.type--button.size--mini.theme--info:not(.is--disabled) {
        background-color: #505766 !important;
        border-color: #505766 !important;
        // height: 20px;
        border-radius: 2px;
      }
      .vxe-button.type--button.size--small.theme--info:not(.is--disabled) {
        background-color: #505766 !important;
        border-color: #505766 !important;
        // height: 26px;
        border-radius: 2px;
      }
      .vxe-pager--wrapper button.is--active {
        background-color: #adb4bc !important;
        border-color: #adb4bc !important;
        box-shadow: none;
      }
      // .vxe-input {
      //   height: 20px;
      // }
      .vxe-pager--wrapper button {
        // width: 18px;
        // height: 18px;
        // line-height: 18px;
        // font-size: 12px;
      }
      // .vxe-pager {
      //   display: flex;
      //   position: absolute;
      //   bottom: 0;
      //   width: 100%;
      //   justify-content: flex-end;
      // }
    }
  }
}
</style>
